<template>
  <view class="login-container">
    <!-- Logo区域保持不变 -->
    <view class="logo-section">
      <image class="logo" src="http://113.45.222.55:9000/doubao/avatar.jpg" mode="aspectFit"/>
      <text class="title">糯米智能AI</text>
    </view>

    <!-- 登录方式选择区域 -->
    <view class="login-section">
      <!-- 微信登录按钮 -->
      <button 
        class="login-btn wechat" 
        @tap="handleLogin"
        open-type="getPhoneNumber"
        @getphonenumber="handleGetPhoneNumber"
      >
        <text class="iconfont icon-wechat"/>
        一键快捷登录
      </button>

      <!-- 暂不登录按钮 -->
      <button 
        class="login-btn phone"
        @tap="handleLogin"
        open-type="getPhoneNumber"
        @getphonenumber="handleGetPhoneNumber"
      >
        <text class="iconfont icon-wechat"/>
        手机号授权登入
      </button>
    </view>

    <!-- 协议区域 -->
    <view class="agreement">
      <checkbox-group @change="handleAgreeChange">
        <checkbox :value="1" :checked="isAgree" style="transform: scale(0.7);"/>
        <text>请先阅读并同意用户协议和隐私政策</text>
        <text class="link" @tap="showAgreement">《服务协议》</text>
        <text>和</text>
        <text class="link" @tap="showPrivacy">《隐私政策》</text>
      </checkbox-group>
    </view>
  </view>
</template>

<script setup>
import { ref } from 'vue'
import { useUserStore } from '@/stores'

const userStore = useUserStore()
const isAgree = ref(false)

// 保存临时登录数据
const tempLoginData = ref(null)

// 处理协议勾选
const handleAgreeChange = (e) => {
  isAgree.value = e.detail.value.length > 0
}

// 点击登录按钮
const handleLogin = async () => {
  if (!isAgree.value) {
    uni.showModal({
      title: '提示',
      content: '请先阅读并同意用户协议和隐私政策',
      showCancel: false
    })
    return
  }

  try {
    // 获取用户信息和登录code
    const [loginRes, userProfileRes] = await Promise.all([
      uni.login(),
      uni.getUserProfile({ desc: '用于完善会员资料' })
    ])
    
    // 保存登录数据，等待获取手机号
    tempLoginData.value = {
      code: loginRes.code,
      username: userProfileRes.userInfo.nickName,
      avatar: userProfileRes.userInfo.avatarUrl
    }
    
  } catch (error) {
    console.error('登录失败:', error)
    uni.showToast({
      title: '登录失败，请重试',
      icon: 'none'
    })
  }
}

// 处理获取手机号
const handleGetPhoneNumber = async (e) => {
  if (!isAgree.value) {
    uni.showModal({
      title: '提示',
      content: '请先阅读并同意用户协议和隐私政策',
      showCancel: false
    })
    return
  }

  if (e.detail.errMsg === 'getPhoneNumber:ok' && tempLoginData.value) {
    try {
      // 调用登录接口，传入所有信息包括手机号
      await userStore.wxLogin({
        ...tempLoginData.value,
        encryptedData: e.detail.encryptedData,
        iv: e.detail.iv
      })

      uni.reLaunch({
        url: '/pages/index/index'
      })
    } catch (error) {
      console.error('登录失败:', error)
      uni.showToast({
        title: '登录失败，请重试',
        icon: 'none'
      })
    }
  }
}

// 查看协议和隐私政策方法保持不变
const showAgreement = () => {
  uni.navigateTo({
    url: '/pages/privacy/privacy'
  })
}

const showPrivacy = () => {
  uni.navigateTo({
    url: '/pages/privacy/privacy' 
  })
}
</script>

<style lang="scss">
.login-container {
  min-height: 100vh;
  padding: 0 60rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  background: #fff;

  // Logo区域样式
  .logo-section {
    margin-top: 160rpx;
    display: flex;
    flex-direction: column;
    align-items: center;

    .logo {
      width: 200rpx;
      height: 200rpx;
      margin-bottom: 30rpx;
    }

    .title {
      font-size: 48rpx;
      font-weight: 600;
      color: #333;
    }
  }

  // 登录区域样式
  .login-section {
    width: 100%;
    margin-top: 120rpx;

    .login-btn {
      width: 100%;
      height: 88rpx;
      margin-bottom: 30rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 32rpx;
      border-radius: 44rpx;

      .iconfont {
        font-size: 40rpx;
        margin-right: 12rpx;
      }

      &.wechat {
        background: #07C160;
        color: #fff;
      }

      &.phone {
        background: #F5F5F5;
        color: #333;
      }
    }
  }

  // 协议区域样式
  .agreement {
    position: fixed;
    bottom: 60rpx;
    font-size: 24rpx;
    color: #999;
    text-align: center;

    .link {
      color: #007AFF;
      display: inline;
    }
  }
}
</style>